<script setup>
import {ref} from "vue";
import useCounterStore from "../stores/counter.js";

let number = ref(3);
let counterStore = useCounterStore();

function clickIncrement(number) {
  counterStore.increment(number)
}

function clickDecrement(number) {
  counterStore.decrement(number)
}

function clickIncrementIfOdd(number) {
  counterStore.incrementIfOdd(number)
}

function clickAsyncIncrement(number) {
  counterStore.incrementAsync(number)
}

</script>

<template>
<div>
  <select v-model.number="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <br>

  <button v-on:click="clickIncrement(number)">增加</button>
  <button v-on:click="clickDecrement(number)">减小</button>
  <button v-on:click="clickIncrementIfOdd(number)">奇数增加</button>
  <button v-on:click="clickAsyncIncrement(number)">异步增加</button>
</div>
</template>

<style scoped>

</style>